{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/manage.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/toastr.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/imgareaselect-default.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename= 'js/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/toastr.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename = 'js/jquery.imgareaselect.pack.js') }}"></script>
{% endblock %}

{% block title %}极光宝盒-管理集成{% endblock %}

{% block navbar %}
    <div id="navigationbar">{{ super() }}</div>

{% endblock %}

{% block content %}

    <div class="manage-background">
        <div class="container">
            <img src="/static/images/manage-background.png">
        </div>

    </div>
    <div class="container">
        <h2 class="jbox-font" id="integration-title">集成自己的应用</h2>
    </div>
    <div class="container">
        {% for message in get_flashed_messages() %}
            <div class="alert alert-warning">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ message }}
            </div>
        {% endfor %}
    </div>

    <div class="container" style="text-align: center;">
        <button class="create-integration" onclick=window.location.href="{{ url_for('auth.post_to_channel') }}";>
            新建自定义集成
        </button>
    </div>

    <div class="container-fluid">
        {% if integrations %}
            <table id="table" class="table" align="center">
                <thead>
                <tr class="table-header">
                    <th class="jbox-font table-header-font">
                        应用名
                    </th>
                    <th class="jbox-font table-header-font">
                        频道
                    </th>
                    <th class="jbox-font table-header-font">
                        描述
                    </th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                {% for integration in integrations %}
                    {% if integration.type == 'custom' %}
                        <tr>
                            <td class="jbox-font table-font">
                                {{ integration.name }}
                            </td>
                            <td class="jbox-font table-font">
                                {{ integration.channel.channel }}
                            </td>
                            <td class="jbox-font table-font">
                                {{ integration.description }}
                            </td>
                            <td>
                                <button id='{{ integration.id }}' name="edit" class="btn btn-info btn-middle"
                                        type="button">编辑
                                </button>
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <p class="jbox-font tip-font">当前还没有创建自定义集成</p>
        {% endif %}

    </div>

    <div class="container" style="text-align: center;">
        <h2 id="integration-title">第三方集成</h2>
    </div>

    <div class="container" style="text-align: center">
        <button class="create-integration"
                onclick=window.location.href="{{ url_for('auth.add_third_party') }}";>添加第三方集成
        </button>
    </div>

    <div class="container">
        {% if github_integrations or discourse_integrations %}
            <table class="tp-table" align="center">
                <tbody>
                <tr>
                    {% if github_integrations %}
                        <td id="github-td">
                            <button class="tp-content"
                                    onclick=window.location.href="{{ url_for('auth.github_integration') }}">
                                <img class="tp-content-icon" src="/static/images/github1x.png">
                                <div style="width: 200px;">GitHub</div>
                            </button>
                        </td>
                    {% endif %}
                    {% if discourse_integrations %}
                        <td>
                            <button class="tp-content"
                                    onclick=window.location.href="{{ url_for('auth.discourse_integration') }}">
                                <div class="row">
                                    <img class="tp-content-icon" src="/static/images/discourse.png">
                                </div>
                                <div style="widows: 200;">Discourse</div>
                            </button>
                        </td>
                    {% endif %}
                </tr>
                </tbody>
            </table>
        {% else %}
            <p class="jbox-font tip-font">当前没有添加任何第三方集成</p>
        {% endif %}

    </div>

    {% block footer %}
        <div id="footer">
            {{ super() }}
        </div>
    {% endblock %}
    <script type="text/javascript">
        {% for integration in integrations %}
            $('#{{ integration.id }}').click(function () {
                window.location.href = '/auth/manage/edit_integration/{{ integration.integration_id }}';
            });
            $('#delete_{{ integration.integration_id }}').click(function () {
                $('#input_hidden').val("{{ integration.integration_id }}");
            });
        {% endfor %}
    </script>
{% endblock %}